<template>
  <view class="choose-package" v-if="res">
    <view class="pic-box">
      <image class="pic" :src="res.coupon.pic_URL"></image>
    </view>
    <view class="content">
      <view class="term-of-validity">
        <text class="label">有效时间</text>
        <text class="value">{{res.coupon.start_Time | formatDate}}至{{res.coupon.deadline | formatDate}}</text>
      </view>
      
      <view class="package">
        <view class="package-title"><text>{{res.coupon.coupon_Package_Name}}</text></view>
        
        <view class="list-box">
        	<view class="cell" :class="{disabled: item.disabled}" v-for="(item, index) in res.groupList" :key="index">
            <view class="top">
              <view class="radio-box" v-if="item.isMustAll && !item.disabled" @click="onClickRadio(item)">
                <i-icon
                  icon="iconiconfontxuanzhong" 
                  size="44rpx"
                  color="#FBD220"
                  v-if="item.selected"
                ></i-icon>
                <i-icon
                  icon="icontuoyuan"
                  size="44rpx"
                  color="#c9c9c9"
                  v-else
                ></i-icon>
              </view>
              <view class="radio-box" v-else>
                <view class="disabled-radio" v-if="item.isMustAll && item.disabled"></view>
              </view>
              <text class="text">{{item.group_Name}}</text>
            </view>
            <view class="item-box">
              <view class="item" v-for="(i, k) in item.goodsServiceList" :key="k" :class="{disabled: !i.isUsable}">
                <view class="left">
                  <view class="radio" v-if="!item.isMustAll && i.isUsable" @click="onClickRadio(i)">
                    <i-icon
                      icon="iconiconfontxuanzhong"
                      size="44rpx"
                      color="#FBD220"
                      v-if="i.selected"
                    ></i-icon>
                    <i-icon
                      icon="icontuoyuan"
                      size="44rpx"
                      color="#c9c9c9"
                      v-else
                    ></i-icon>
                  </view>
                  <view class="radio" v-if="!item.isMustAll && !i.isUsable" @click="onClickRadio(i)">
                    <view class="disabled-radio"></view>
                  </view>
                </view>
                <image class="img" :src="i.pic_Details_URL" v-if="i.goodsRuleType === 1 || i.goodsRuleType === 4"></image>
                <view class="left-text" v-else><text>{{i.goodsRuleType === 4 ? '' : '服务工时费'}}</text></view>
                <view class="info">
                  <view class="title">
                    <text class="t">{{i.name}}</text>
                    <text class="num" v-if="i.left_Num === null">{{res.coupon.deadline1 === '2099-12-31' ? 'x终身' : '365 x 终身'}}</text>
                    <text class="num" v-else>x{{i.left_Num < 1 ? '0' : i.count}}</text>
                  </view>
                  <!-- <view class="tags">
                    <text class="text">全合成</text>
                    <text class="text">5W-40</text>
                    <text class="text">SP</text>
                    <text class="text">4L</text>
                  </view> -->
                  <view class="bottom-box">
                    <text class="price">￥<text class="strong">{{i.sale_Price}}</text></text>
                    <text class="status" v-if="!i.isUsable">{{i.left_Num < 1 && i.left_Num !== null ? '次数已用完' : '未添加该商品'}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
        </view>
      </view>
      
      <view class="section">
        <view class="item">
          <text class="label">订单金额</text>
          <text class="value">满0元可用</text>
        </view>
        <view class="item">
          <text class="label">使用规则</text>
          <text class="value">满0卡券使用后概不退换</text>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <view class="btn-box">
        <view class="btn" @click="onSubmit"><text>确认</text></view>
      </view>
    </view>
    
    <u-popup v-model="show" mode="center" border-radius="20" width="600" :mask-close-able="false">
      <view class="bind-content-popup">
        <view class="title"><text>温馨提示</text></view>
        <view class="content">
          <text>您购买的【{{res.coupon.coupon_Package_Name}}】\n将绑定车牌号为：<text class="bold">{{orderinfo.myLoveCar.car_Num}}</text>\n{{orderinfo.myLoveCar.car_Type_Name}} {{orderinfo.myLoveCar.car_Name}}\n绑定不可更改</text>
        </view>
        <view class="btn-box">
          <view class="btn left" @click="show = false"><text>取消</text></view>
          <view class="btn right" @click="onClickBind"><text>确定</text></view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const dayjs = require('@/utils/dayjs.js')
export default {
  data() {
    return {
      show: false,
      res: null
    }
  },
  computed: {
    // 订单信息
    orderinfo() {
      return this.$store.state.maintenanceOrderInfo
    },
    maintenanceOrder() {
      return this.$store.state.maintenanceOrder
    }
  },
  filters: {
    formatDate(data) {
      let date = dayjs(data).format('YYYY-MM-DD')
      return date === '2099-12-31' ? '终身' : dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  onLoad(option) {
    // #ifdef H5
    if (this.orderinfo) {
      let orderinfo = sessionStorage.maintenanceOrderInfo ? JSON.parse(sessionStorage.maintenanceOrderInfo) : []
      
      let maintenanceOrder = sessionStorage.maintenanceOrder ? JSON.parse(sessionStorage.maintenanceOrder) : []
      this.$store.commit('maintenanceOrderInfo', orderinfo)
      this.$store.commit('maintenanceOrder', maintenanceOrder)
      
    }
    // #endif
    
    uni.setNavigationBarTitle({
      title: option.name || ''
    })
    
    if (option.id) {
      uni.showLoading({
        title: '加载中'
      })
      this.GetUsableCouponsByIdAndGoods(option.id)
    }
  },
  
  methods: {
    async GetUsableCouponsByIdAndGoods(id) {
      let params = {
        goodsList: [],
        serviceFeeList: []
      }
      this.maintenanceOrder.goodsList.map(item => {
        item.maintenanceGoodsLists.map(i => {
          params.goodsList.push({
            maintenance_Type_Id: i.maintenance_Type_Id,
            maintenance_Goods_Id: i.id,
            sale_Price: i.sale_Price
          })
        })
      })
      this.maintenanceOrder.serviceFeeList.map(item => {
        params.serviceFeeList.push({
          serviceId: item.serviceId,
          service_Calculate_Rule_id: item.service_Calculate_Rule_id,
          sale_Price: item.svcPrcTotal
        })
      })
      try {
        const res = await this.$api.maintenanceOrder.GetUsableCouponsByIdAndGoods({
          id: id,
          car_num: this.orderinfo.myLoveCar.car_Num,
          ...params
        })
        uni.hideLoading()
        this.loading = false
        if (res.code === 200) {
          let data = res.data;
          data.groupList = data.groupList.map(item => {
            item.selected = false
            item.disabled = item.goodsServiceList.every(i => {
              return !i.isUsable
            })
            item.goodsServiceList.map(i => {
              i.selected = false
              return i
            })
            return item
          })
          data.coupon.deadline1 = dayjs(data.coupon.deadline).format('YYYY-MM-DD')
          this.res = data
        }
      } catch (e) {
        console.log(e)
        uni.hideLoading()
        this.loading = false
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 2000)
      }
    },
    onClickRadio(item) {
      item.selected = !item.selected
    },
    onSubmit() {
      if(this.res.isNeedAddCar) {
        this.show = true
        return false
      }
      let arr = [], total = 0, goods = [], service = [], deduction = null
      this.res.groupList.map(item => {
        item.goodsServiceList.map(i => {
          if((item.selected || i.selected) && i.isUsable) {
            arr.push(i)
            if(i.discountAmount < 0) {
              total += Number(-i.discountAmount)
            } else {
              total += Number(i.discountAmount)
            }
            if(i.goodsRuleType === 1) {
              goods.push(i)
            }
            if(i.goodsRuleType === 2) {
              service.push(i)
            }
            if(i.goodsRuleType === 4) {
              deduction = i
            }
          }
        })
      })
      if(arr.length > 0) {
        uni.$emit('changeCoupon', {
          is_Package: true,
          discountTotalAmount: total,
          data: {
            coupon: this.res.coupon,
            list: arr,
            goods: goods,
            service: service,
            deduction: deduction
          }
        })
      }
      uni.navigateBack({
        delta: 2
      })
    },
    async onClickBind() {
      uni.showLoading({
        title: '加载中'
      })
      try {
        let userinfo = uni.getStorageSync('Ztc_C_USER_INFO')
        let res = await this.$api.common.CouponBindingCar({
          couponId: this.res.coupon.id,
          carNum: this.orderinfo.myLoveCar.car_Num,
          accountId: userinfo.id
        })
        if (res.code === 200) {
          this.show = false
          this.res.isNeedAddCar = false
        }
        uni.showToast({
          icon: 'none',
          title: res.msg
        })
        uni.hideLoading()
      } catch (e) {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss">
page{
  background-color: #f6f6f6;
}
.choose-package{
  padding-bottom: 200rpx;  
  padding-bottom: calc(constant(safe-area-inset-bottom) + 200rpx);  
  padding-bottom: calc(env(safe-area-inset-bottom) + 200rpx);
  .pic-box{
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
    .pic{
      width: 660rpx;
      height: 330rpx;
    }
  }
  .content{
    background-color: #fff;
    padding: 0 30rpx;
    .term-of-validity{
      display: flex;
      line-height: 36rpx;
      padding: 30rpx 0;
      border-bottom: 2rpx solid #eee;
      .label{
        font-size: 24rpx;
        color: #999;
      }
      .value{
        display: block;
        flex: 1;
        margin-left: 46rpx;
        font-size: 24rpx;
        color: #333;
      }
    }
    .package{
      padding: 30rpx 0;
      border-bottom: 2rpx solid #eee;
      .package-title{
        font-size: 24rpx;
        color: #999;
      }
      .list-box{
        .cell{
          color: #333;
          .top{
            display: flex;
            align-items: center;
            margin-top: 20rpx;
            .radio-box{
              width: 44rpx;
              height: 44rpx;
              display: flex;
              align-items: center;
              .disabled-radio{
                width: 40rpx;
                height: 40rpx;
                border-radius: 40rpx;
                background-color: #e6e6e6;
              }
            }
            .text{
              font-size: 28rpx;
              font-weight: bold;
              margin-left: 20rpx;
            }
          }
          .item-box{
            .item{
              display: flex;
              padding-top: 30rpx;
              .radio{
                width: 64rpx;
                height: 120rpx;
                display: flex;
                align-items: center;
                .disabled-radio{
                  width: 40rpx;
                  height: 40rpx;
                  border-radius: 40rpx;
                  background-color: #e6e6e6;
                }
              }
              .left{
                width: 64rpx;
                height: 120rpx;
              }
              .img{
                width: 120rpx;
                height: 120rpx;
                border-radius: 10rpx;
              }
              .left-text{
                width: 120rpx;
                line-height: 40rpx;
                font-size: 24rpx;
              }
              .info{
                flex: 1;
                margin-left: 25rpx;
                .title{
                  display: flex;
                  line-height: 40rpx;
                  .t{
                    display: block;
                    flex: 1;
                    font-size: 24rpx;
                    margin-right: 120rpx;
                  }
                  .num{
                    font-size: 26rpx;
                  }
                }
                .tags{
                  display: flex;
                  align-items: center;
                  margin-top: 8rpx;
                  .text{
                    font-size: 20rpx;
                    color: #799CF2;
                    border: 1px solid #799CF2;
                    border-radius: 5rpx;
                    margin-right: 12rpx;
                    padding: 0 6rpx;
                  }
                  .text:first-child{
                    color: #EF9A3F;
                    border: 1px solid #EF9A3F;
                  }
                }
                .bottom-box{
                  margin-top: 10rpx;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .price{
                    font-size: 20rpx;
                    color: #FF6F6A;
                    .strong{
                      font-size: 28rpx;
                      font-weight: bold;
                    }
                  }
                  .status{
                    font-size: 26rpx;
                    color: #999;
                  }
                }
              }
              &.disabled{
                color: #999;
                .info{
                  .bottom-box{
                    .price{
                      color: #999;
                    }
                  }
                }
              }
            }
          }
          
          &.disabled{
            color: #999;
            .item-box{
              .item{
                .info{
                  .bottom-box{
                    .price{
                      color: #999;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
    .section{
      padding: 20rpx 0;
      .item{
        display: flex;
        line-height: 50rpx;
        .label{
          font-size: 24rpx;
          color: #999;
        }
        .value{
          display: block;
          flex: 1;
          margin-left: 46rpx;
          font-size: 24rpx;
          color: #333;
        }
      }
    }
  }
  
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);
    .btn-box{
      padding: 0 24rpx 30rpx;
      .btn{
        height: 88rpx;
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #3D3D3D;
      }
    }
  }

  .bind-content-popup{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 66rpx;
    .title{
      font-size: 34rpx;
      color: #333;
      font-weight: bold;
    }
    .content{
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #333;
      line-height: 50rpx;
      text-align: center;
      .bold{
        font-weight: bold;
        font-size: 32rpx;
      }
    }
    .btn-box{
      margin-top: 30rpx;
      display: flex;
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        width: 260rpx;
        height: 88rpx;
      }
      .left{
        background-color: #3D3D3D;
        border-radius: 44rpx 0 0 44rpx;
        color: #FFE23E;
        font-size: 28rpx;
      }
      .right{
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        border-radius: 0 44rpx 44rpx 0;
        font-size: 30rpx;
        color: #333;
        margin-left: 2rpx;
      }
    }
  }
}
</style>
